import { BasicColumn } from '@/components/Table';
import { AnField } from '@/api/sys/model/entitysModel';
import { Image, Popover, Tag } from 'ant-design-vue';
import { Icon } from '@/components/Icon';
import IFrameModelButton from '@/components/IFrameModal/IFrameModelButton/index.vue';
import BasicPreview from '@/components/Upload/src/BasicPreview.vue';
import PickColors from 'vue-pick-colors';
import { QrCode } from '@/components/Qrcode';
import { toJSON } from '@/api/sys/anno';
import { template } from 'lodash-es';
import { compile } from 'vue';

const ImageType: string[] = ['IMAGE', 'AVATAR'];
const IconType: string[] = ['ICON'];
const FilesType: string[] = ['FILE'];
const TransType: string[] = ['PICKER', 'OPTIONS', 'TREE', 'RADIO', 'CLASS_OPTIONS'];

export function getColumns(fieldsDatas: AnField[]) {
  if (fieldsDatas && fieldsDatas.length > 0) {
    return fieldsDatas.map((item) => {
      let field: BasicColumn = {
        title: item.title,
        width: 120,
        annoType: item.dataType,
      } as BasicColumn;
      field.dataIndex = item.javaName;
      field.defaultHidden = !item.show;
      field.sorter = { multiple: 1 };
      if (TransType.includes(item.dataType)) {
        field.customRender = ({ value, record }) => {
          let transValue = record['joinResMap'][`${item.javaName.toLowerCase()}_label`];
          if (!transValue) {
            transValue = value;
          }
          let simpleContent = <div>{transValue}</div>;
          if (transValue instanceof Object) {
            if (transValue.color) {
              simpleContent = <Tag color={transValue.color}> {transValue.value}</Tag>;
            } else {
              simpleContent = <div>{toJSON(transValue)}</div>;
            }
          }
          if (value) {
            return <Popover title={value}>{simpleContent}</Popover>;
          }
          return '';
        };
      }
      if (ImageType.includes(item.dataType)) {
        field.customRender = ({ value, record }) => {
          let fallBack =
            '';
          return (
            <Image
              style={{ width: item.imageType.width + 'px', height: item.imageType.height + 'px' }}
              preview={value ? item.imageType.enlargeAble : false}
              src={value ? value : fallBack}
              fallback={fallBack}
            ></Image>
          );
        };
      }
      if ('COLOR' == item.dataType) {
        field.customRender = ({ value, record }) => {
          return (
            <PickColors
              show-picker={false}
              showAlpha={true}
              width={80}
              height={20}
              value={value}
            ></PickColors>
          );
        };
      }
      if ('RICH_TEXT' == item.dataType) {
        field.customRender = ({ value, record }) => {
          return <IFrameModelButton doc={value}></IFrameModelButton>;
        };
      }
      if ('MARK_DOWN' == item.dataType) {
        field.customRender = ({ value, record }) => {
          return <IFrameModelButton markdownDoc={value} />;
        };
      }
      if ('CODE_EDITOR' == item.dataType) {
        field.customRender = ({ value, record }) => {
          return (
            <IFrameModelButton
              codeDoc={value}
              codeMode={item.codeType.mode}
              codeTheme={item.codeType.theme}
            />
          );
        };
      }
      if ('LINK' == item.dataType) {
        field.customRender = ({ value, record }) => {
          return <IFrameModelButton link={value}></IFrameModelButton>;
        };
      }
      if ('QR_CODE' == item.dataType) {
        field.customRender = ({ value, record }) => {
          return <QrCode value={value} previewWidth="60px" width="600"></QrCode>;
        };
      }
      if (IconType.includes(item.dataType)) {
        field.customRender = ({ value, record }) => {
          return <Icon icon={value}></Icon>;
        };
      }
      if (FilesType.includes(item.dataType)) {
        field.customRender = ({ value, record }) => {
          if (value instanceof Array) {
            return <BasicPreview value={value}> </BasicPreview>;
          }
          if (value) {
            return <BasicPreview value={[value]}></BasicPreview>;
          }
          return <BasicPreview></BasicPreview>;
        };
      }
      if (item.render != null && item.render) {
        field.customRender = ({ value, record }) => {
          const compiled = template(item.render);
          return (
            <div class="h-full">
              <iframe
                srcdoc={compiled()}
                style="{width: '100%', height: '100%', border: 'none'}"
              ></iframe>
            </div>
          );
        };
      }
      return field;
    });
  }
  return [];
}
